<template>
	<view>
		<view class="d-flex a-center j-sb py-2 px-3 text-light-muted">
			<view class="iconfont icon-shanchu1" @click="goMyfile"></view>
			<view class="font-md">忘记密码</view>
		</view>
		<view class="p-5">
			<view class="font-big mb-5">密码登录</view>
			<!-- <input type="text" class="border-bottom mb-4 uni-input px-0" placeholder="请输入手机号/邮箱/账号"
				placeholder-class="text-light-muted" v-model="ufrom.username" @focus="focus('username')"
				@blur="blur('username')" :class="focusClass.username?'input-border-color':''" />
			<input type="password" class="border-bottom mb-4 uni-input px-0" placeholder="请输入密码"
				placeholder-class="text-light-muted" v-model="ufrom.password" @focus="focus('password')"
				@blur="blur('password')" :class="focusClass.password?'input-border-color':''" />
			<button class="py-1 w-100 d-flex a-center j-center main-bg-color  rounded font-md mb-4"
				hover-class="main-bg-hover-color" @click="submit">
				登录
			</button> -->

			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatar"></image>
			</button>
			<input type="nickname" class="weui-input" placeholder="请输入昵称" :value="nickname" @change="getNickName"/>
			<button class="py-1 w-100 d-flex a-center j-center main-bg-color  rounded font-md mb-4"
				hover-class="main-bg-hover-color" @click="submit2">
				微信登录
			</button>
			<label class="checkbox d-flex a-center">
				<checkbox :checked="check" @click="check=!check" />
				<text class="font text-light-muted">已阅读并同意XXXXX协议</text>
			</label>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getLogin
	} from '../../api/index.js'
	import {
		useLoginStore
	} from '../../store/login'
	import {
		useCartStore
	} from '../../store/cart.js'
	const store2 = useCartStore()
	const store = useLoginStore()
	var ufrom = ref({
		username: 'user2',
		password: 'zcmcss'
	})
	var check = ref(false)
	var focusClass = ref({
		username: false,
		password: false
	})
	var avatar = ref(
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
		)
	var nickname = ref('')
	//获取头像
	const onChooseAvatar = (e) => {
		avatar.value = e.detail.avatarUrl
	}
	//获取昵称
	const getNickName = (e)=>{
		console.log(e);
		nickname.value = e.detail.value
		console.log(nickname.value);
	}
	const focus = (key) => {
		focusClass.value[key] = true
	}
	const blur = (key) => {
		focusClass.value[key] = false
	}

	var rules = {
		username: [{
			message: '请输入正确的账号，账号长度为2-10之间',
			rule: /^[a-zA-Z0-9_-]{2,10}$/
		}],
		password: [{
			message: '请输入正确的密码，密码长度为4-20之间',
			rule: /^[a-zA-Z]([-_a-zA-Z0-9]{4,20})$/
		}]
	}
	//表单验证
	const validate = (key) => {
		let check = true;
		rules[key].forEach(v => {
			var obj = ufrom.value[key];
			if (!v.rule.test(obj)) {
				uni.showToast({
					title: v.message,
					icon: 'none'
				})
				check = false
				return;
			}

		})
		return check;
	}
	const goMyfile = () => {
		uni.switchTab({
			url: '/pages/myfile/myfile'
		})
	}
	//登录
	const submit = () => {
		if (!validate('username')) {
			return;
		}
		if (!validate('password')) {
			return;
		}
		if (check.value) {
			//请求接口
			getLogin(ufrom.value.username, ufrom.value.password).then(res => {
				console.log('11111111111', res);
				if (res.msg == 'ok') {
					store.getUserInfo(res.data)
					store2.getCartList()
					uni.switchTab({
						url: '/pages/myfile/myfile'
					})
				}
			})

		} else {
			uni.showToast({
				title: '请同意相关协议规定',
				icon: 'none'
			})
			return;
		}
	}
    var code = ref('')
	const submit2 = () => {
		if (check.value) {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (loginRes) => {
					console.log(loginRes);
					code.value = loginRes.code;
					console.log('code',code.value);
					uni.request({
					    url: 'http://localhost:3000/api/logins/login', 
						method:'POST',
					    data: {
					        nickname:nickname.value,
							avatar:avatar.value,
							code:code.value
					    },
					    success: (res) => {
					        console.log(res);
							if (res.data.msg == 'ok') {
								store.getUserInfo(res.data.data)
								// store2.getCartList()
								uni.switchTab({
									url: '/pages/myfile/myfile'
								})
							}
					    }
					});
				}
			});


		} else {
			uni.showToast({
				title: '请同意相关协议规定',
				icon: 'none'
			})
			return;
		}
	}
</script>

<style scoped>
	.wx-login-wrapper {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.wx-login {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx 0 0 0;
	}

	.avatar-wrapper {
		width: 90rpx;
		height: 90rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		margin: 0 0 0 -24rpx;

	}

	.text-light-muted {
		color: #ccc !important;
	}

	.img-avatar {
		width: 100rpx;
		height: 100rpx;
	}
</style>